<template>
  <el-dialog
    :title="title ? '域名编辑':'新增域名'"
    :visible.sync="showBlogForm"
    custom-class="mini-dialog dialog-style" :close-on-click-modal="false"
    @closed="closeClear">
    <!--label-width="80px" 依照標題字數去設-->
      <el-form :model="ruleForm" :rules="rules" class="form" size="small" ref="ruleForm" v-loading="loading"
                   element-loading-customClass="loadingClass" element-loading-spinner="dafa-icon-loading01 dafa-icon" @keyup.native.enter="submitForm('ruleForm')" @submit.native.prevent>
        <el-form-item label="域名类型" prop="urlId">
          <el-radio-group :disabled="title"  v-model="ruleForm.urlId" :size="screenW > 768 ? 'mini':'medium'">
            <el-radio-button :label="1">前台域名</el-radio-button>
            <el-radio-button :label="2">后台域名</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="厅主编码" prop="tenantCode">
          <el-input v-model.trim="ruleForm.tenantCode" placeholder="请输入厅主编码" :disabled="title"></el-input>
        </el-form-item>
        <el-form-item label="域名" prop="url" v-if="screenW > 768">
          <el-input v-model="ruleForm.url" :placeholder="(ruleForm.urlId === 1) ? '如：xxx.com（必须是一级域名，不需要添加WWW）':'如：xxx.yyy.com（必须是二级域名，但不支持WWW.或M.）'"></el-input>
        </el-form-item>
        <el-form-item label="域名" prop="url" v-else>
          <el-input v-model="ruleForm.url"  placeholder="请输入域名"></el-input>
          <div class="text-style">{{ruleForm.urlId === 1 ? '如：xxx.com（必须是一级域名，不需要添加WWW）':'如：xxx.yyy.com（必须是二级域名，但不支持WWW.或M.'}}</div>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="ruleForm.remark" placeholder="请输入您要备注的内容"></el-input>
        </el-form-item>
      </el-form>
    <!--    footer-->
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeClear" size="mini">取 消</el-button>
        <el-button :disabled="submitLoading" type="primary" size="mini" @click.stop="submitForm('ruleForm')" :loading="submitLoading"> 确 定</el-button>
      </div>
  </el-dialog>
</template>
<script>
// import Api from '@/api/sys'
import {checkNotHttp} from '@/utils/validate'
export default {
  data () {
    let validateUrl = (rule, value, callback) => {
      if (!value || value === '') {
        callback(new Error('请输入域名'))
        return false
      }
      if (!checkNotHttp(value)) {
        callback(new Error('域名格式错误'))
        return false
      }
      if (this.ruleForm.tenantCode && this.ruleForm.tenantCode.toLowerCase() === 'app') {
        callback()
        return
      }
      let index = value.toLowerCase().indexOf('http://')
      if (index > -1) {
        callback(new Error('格式错误，不能包含http://'))
        return
      }
      index = value.toLowerCase().indexOf('https://')
      if (index > -1) {
        callback(new Error('格式错误，不能包含https://'))
        return
      }
      index = value.toLowerCase().indexOf('www.')
      if (index > -1) {
        callback(new Error('格式错误，不需要添加WWW'))
        return
      }
      let urlData = value.split('.')
      // console.log('urlData', urlData)
      if (this.ruleForm.urlId === 1) {
        if (urlData.length !== 2) {
          callback(new Error('前台网址必须使用一级域名（不需要添加WWW）'))
          return
        }
      }
      if (this.ruleForm.urlId === 2) {
        let reg = /^m\./
        let valid = reg.test(value.toLowerCase())
        if (valid) {
          callback(new Error('格式错误，不需要添加WWW.与M.'))
          return
        }
        if (urlData.length !== 3) {
          callback(new Error('后台网址必须使用二级域名（但不支持WWW.或M.）'))
          return false
        }
      }
      callback()
    }
    return {
      title: false,
      showBlogForm: false,
      loading: false,
      submitLoading: false,
      ruleForm: {
        urlId: 1,
        tenantCode: '',
        url: '',
        remark: ''
      },
      rules: {
        tenantCode: [
          { required: true, message: '请输入厅主编码', trigger: 'blur' }
        ],
        url: [
          {required: true, validator: validateUrl, trigger: 'blur'},
          { required: true, message: '请输入域名', trigger: 'blur' }
        ]
      }
    }
  },
  props: {
    value: Boolean,
    data: Object
  },
  computed: {
    screenW () {
      return 1024
    }
  },
  methods: {
    closeClear () {
      this.$emit('input', false)
      this.resetForm('ruleForm')
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    },
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true
          this.submitLoading = true
          if (this.title) {
            // 修改IP
            this.editPostFrom()
          } else {
            // 新增IP
            this.addPostFrom()
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    addPostFrom () {
      // let parame = this.ruleForm
      // Api.addUrl(parame).then(res => {
      //   this.loading = false
      //   this.submitLoading = false
      //   if (res.code === 1) {
      //     this.msgSuccess('保存成功')
      //     this.closeClear()
      //     this.$parent.getList()
      //   }
      // }).catch(e => {
      //   this.loading = false
      //   this.submitLoading = false
      // })
    },
    editPostFrom () {
      // 厅主域名不支持编辑
      // let parame = this.ruleForm
      // Api.updateUrl(parame).then(res => {
      //   this.loading = false
      //   this.submitLoading = false
      //   if (res.code === 1) {
      //     this.msgSuccess('保存成功')
      //     this.closeClear()
      //     this.$parent.phoneBtnShow = false
      //     this.$parent.getList()
      //   }
      // }).catch(e => {
      //   this.loading = false
      //   this.submitLoading = false
      // })
    }
  },
  watch: {
    value (nv) {
      this.showBlogForm = nv
      if (nv) {
        // 判斷是否編輯或新增
        this.title = false
        if (this.data.id) {
          this.title = true
          let data = this.data
          this.ruleForm = {
            id: data.id,
            urlId: data.urlId,
            tenantCode: data.tenantCode,
            url: data.url,
            remark: data.remark
          }
        } else {
          this.ruleForm = {
            urlId: 1,
            tenantCode: '',
            url: '',
            remark: ''
          }
        }
      } else {
        this.title = false
        this.loading = false
        this.submitLoading = false
      }
    }
  }
}
</script>
